<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>China Map use D3v4</title>
    <script type="text/javascript" src="../lib/d3v4.js"></script>
</head>

<body>

<script type="text/javascript">

    //svg的长度宽度
    var width  = 1000;
    var height = 1000;

    //
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(0,0)");

    //d3细化了geo操作，这是原来的代码
//    var projection = d3.geo.mercator()
//        .center([107, 31])　　　
//        .scale(850)
//        .translate([width/2, height/2]);　　　　
    var projection = d3.geoMercator().center([107,31])
        .scale(850)
        .translate([width/2,height/2]);


    //定义地理路径生成器
    var path = d3.geoPath()　　　　　//应用上面生成的投影，每一个坐标都会先调用此投影函数，然后才产生路径值
        .projection(projection);

    //颜色比例尺
    var color = d3.scaleOrdinal(d3.schemeCategory20);


    //请求china.geojson
    d3.json("../geojson/china.geojson", function(error, root) {

        if (error)
            return console.error(error);
        console.log(root.features);

        svg.selectAll("path")
            .data( root.features)
            .enter()
            .append("path")
            .attr("stroke","#aaa")   //svg边线属性定义，这里是颜色
            .attr("stroke-width",1)　　//这里是宽度
            .attr("stroke-dasharray",10,10)   //svg stroke虚线
            .attr("fill", function(d,i){    //每一块的颜色填充
                return color(i);
            })
            .attr("name",function(d){
                return d.properties.name;
            })
            .attr("d", path )

    });
</script>

</body>
</html>
